<template>
  <div class="body">
    <div class="box">
      <el-page-header @back="goback" content="详情界面"></el-page-header>
      <div class="card"><img :src="good.img" alt="" /></div>
      <div class="info">
        <div class="item">
          商品名: {{ good.name }} <br />
          <span style="font-size: 20px">编号:{{ good.goodid }}</span>
        </div>
        <!-- <div class="item">商品类别: {{ good.catalog }}</div> -->
        <div class="item">商品价格: {{ good.price }}</div>
        <div class="item">商品数量: {{ good.num }}</div>
        <div class="item item2">商品简介: {{ good.introduction }}</div>
        <div class="item">
          <el-button @click="collect" type="primary" v-if="!isCollected"
            >添加收藏</el-button
          >
          <el-button @click="uncollect" type="primary" v-if="isCollected"
            >取消收藏</el-button
          >
          <el-button @click="talkto" type="primary">联系卖家</el-button>
          <el-button @click="buygood" type="primary">购买商品</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="购买" :visible.sync="buy">
      <div style="font-size: 25px">请选择您要购买的数量</div>
      <el-form>
        <el-form-item label="需求数量">
          <el-input-number v-model="num" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmBuy">确定购买</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.good = this.$store.state.good;
    this.isCollected = false;
    this.buy = false;
  },
  data() {
    return {
      buy: true,
      isCollected: false,
      num: "1",
      good: {
        goodid: "",
        userid: "",
        username: "",
        name: "",
        price: "",
        num: "",
        catalog: "",
        img: "",
        introduction: "",
      },
    };
  },
  methods: {
    buygood() {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      this.buy = true;
    },
    cancel() {
      this.buy = false;
    },
    goback() {
      this.$router.go(-1);
    },
    talkto() {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      //卖家
      var user = {
        username: this.good.username,
        userid: this.good.userid,
        userimg:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      };
      this.$store.commit("talkto", user);
      this.$router.push("mymessage");
    },
    collect() {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      //收藏商品
      this.$http.post("addcollect", { gid: this.good.goodid }).then((res) => {
        if (res.data.success === true) {
          this.isCollected = true;
          this.$message.success(res.data.message);
        } else {
          this.$message.error(res.data.message);
        }
      });
      this.isCollected = true;
    },
    uncollect() {
      //取消收藏
      this.$http
        .post("deletecollect", { gid: this.good.goodid })
        .then((res) => {
          if (res.data.success === true) {
            this.isCollected = false;
            this.$message.success(res.data.message);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    confirmBuy() {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      this.$http
        .post("order/new", { gid: this.good.goodid, num: this.num })
        .then((res) => {
          if (res.data.success === true) {
            this.$message.success("购买成功!");
            this.buy = false;
          } else {
            this.$message.error("购买失败,请稍后再试!");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  height: 960px;
}
.box {
  width: 60%;
  background-color: #fff;
  height: 800px;
  margin: 0 auto;
}
/deep/.el-page-header {
  line-height: 70px;
}
/deep/.el-page-header__title {
  font-size: 23px;
}
/deep/.el-page-header__content {
  font-size: 23px;
}
/deep/.el-page-header i {
  font-size: 30px;
  margin-left: 20px;
}
.card {
  display: inline-block;
  margin: 30px;
  width: 40%;
}
.info {
  float: right;
  width: 50%;
  height: 90%;
  padding: 20px;
}
img {
  width: 100%;
}
.item {
  width: 100%;
  height: 80px;
  font-size: 26px;
  margin-top: 10px;
}
.item2 {
  height: 200px;
}
/deep/.el-dialog__title {
  line-height: 30px;
  font-size: 30px;
}
/deep/.el-input__inner {
  font-size: 18px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}
</style>